import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {Link, withRouter} from 'react-router-dom';

import StartupSlider from '../components/StartupSlider';
import {appFinishedStartup} from '../utils/site';

import HomeHeader from '../components/HomeHeader';
import Slider from '../components/Slider';
import Marquee from '../components/Marquee';
import QuickSection from '../components/QuickSection';
import SiteNav from '../components/SiteNav';
import Footer from '../components/Footer';
import FooterMenu from '../components/FooterMenu';
import AdBanner from '../components/AdBanner';
import BulletinNav from '../components/BulletinNav';
import HomeBrick from '../components/ToyBrick';

import {loadSiteInfo, loadDynamicBrick, loadLiveSportElectGames} from '../actions/AppAction';
import LoadingComponent from '../components/LoadingComponent';

const REGION_NAME = 'home';


import {staticURL} from '../utils/url';

class HomeContainer extends LoadingComponent { 
  
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    const {dispatch} = this.props;
    dispatch(loadSiteInfo());
    dispatch(loadDynamicBrick());
    dispatch(loadLiveSportElectGames());
  }

  componentWillReceiveProps(nextProps) {
    this.closeLoading();
  }

  render() {  
    const {app, userModule, dispatch} = this.props;
    const {isLogin} = userModule.user.get('auth').get('isLogin');
    return (
      <div className="page home">
        <div className="inner">
          <HomeHeader {...this.props}>
            <img src={this.props.app.get('logo')} alt=""/>
          </HomeHeader>  
          <div className="page-body">
            <Slider {...this.props} sliders={app.get('homeSlider')} />
            <Link to={'/annoucement'}><Marquee {...this.props} messages={app.get('messages')} /></Link>
            <QuickSection {...this.props} />
            <SiteNav {...this.props} />
            
            <HomeBrick region={'home'} dispatch={dispatch} history={this.props.history} isLogin={isLogin} brick={this.props.homeBrick} />

            <Footer {...this.props} />
            <FooterMenu />
          </div>
        </div>
      </div>
    );
  };
};

function mapStateToProps(state) {
  const {userModule, app, brick} = state;
  return {
    app,
    userModule,
    homeBrick: brick.get(REGION_NAME)
  };
}

export default connect(mapStateToProps)(withRouter(HomeContainer));